<template>
    <div class="app-container">

        <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
            <el-col :span="6">
                <el-form-item label="线索来源名称:" prop="customerDictName">
                    <el-input maxlength="30" v-model="queryParams.customerDictName" clearable placeholder="请输入线索来源名称"></el-input>
                </el-form-item>
            </el-col>
        </SearchContent>

        <div class="card-wrap paddingAll20" :model="queryParams" ref="queryForm" label-width="86px">
            <div class="table-title-wrap justify-end">
                <el-button type="primary" size="mini" @click="handleAdd"
                           v-hasPermi="['memberClue:clueOrigin:add']">新增
                </el-button>
            </div>


            <table-page :loading="loading" :dataList="dataList" border :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @setSizeCurrent="getList">
                <!-- 操作插槽 -->
                <template slot="tableColAc">
                    <el-table-column label="操作" align="center" fixed="left" width="130">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
                                       v-hasPermi="['memberClue:clueOrigin:edit']">编辑
                            </el-button>
                            <el-button size="mini" type="text" @click="handleDelete(scope.row)"
                                       v-hasPermi="['memberClue:clueOrigin:delete']">{{ 1==scope.row.status?'启用':'停用' }}
                            </el-button>

                        </template>
                    </el-table-column>
                </template>
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column label="ID" align="center" prop="customerDictId">
                        <template v-slot="{row}">
                            {{row.customerDictId|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="线索来源名称" align="center" prop="customerDictName">
                        <template v-slot="{row}">
                            {{row.customerDictName|filterNull}}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="描述" align="center" prop="customerDictRemark">
                        <template v-slot="{row}">
                            {{row.customerDictRemark|filterNull}}
                        </template>
                    </el-table-column>
                </template>
            </table-page>

        </div>

        <!-- 添加或修改测试单表对话框 -->
        <el-dialog :title="title" :visible.sync="open" append-to-body class="form-dialog" width="45%">
            <el-form ref="form" :rules="rules" :model="form" label-width="120px" @submit.native.prevent>

                <el-row>
                    <el-col :span="20">
                        <el-form-item label="线索来源名称:" prop="customerDictName">
                            <el-input maxlength="50" @keyup.enter.native="submitForm" v-model="form.customerDictName" clearable placeholder="请输入线索来源名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="描述:" prop="customerDictRemark">
                            <el-input v-model="form.customerDictRemark"
                                      type="textarea" maxlength="500"
                                      :rows="2"
                                      clearable placeholder="请输入描述"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" >
                <el-button @click="cancel">{{ isNew ? '取消' : '关闭' }}</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="submitForm" v-if="isNew">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import {customerDictAdd, customerDictDelete, customerDictEdit, customerDictList} from "@/api/memberManage/memberList";

export default {
    name:"ClueOrigin",
    components: {
        SearchContent
    },
    data() {
        return {
            //按钮loading
            buttonLoading: false,
            // 遮罩层
            loading: true,
            isNew: true,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                customerDictName: null
            },

            total: 0,
            dataList: [],

            // 表单参数
            form: {},
            // 表单校验
            rules: {
                customerDictName: [
                    {required: true, message: "线索来源名称不能为空", trigger: "blur"}
                ],
            }
        };
    },
    created() {
        this.handleQuery()
    },
    activated() {
        this.getList()
    },
    methods: {
        /** 查询测试单表列表 */
        getList() {
            this.queryParams.customerDictType = 'clues_source';

            this.loading = true;

            customerDictList(this.queryParams).then(res => {
                if (res.code == "200") {
                    const {rows, total} = res
                    this.dataList = rows
                    this.total = total
                    this.loading = false;
                }
            });
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {};
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                customerDictName: null
            },
                // this.resetForm("queryForm");
                this.handleQuery();
        },

        /** 新增操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.isNew = true
            this.title = "新增标签";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            this.open = true;
            this.isNew = true;
            this.form = {...row}
            this.title = "编辑";
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            // this.$modal.confirm('是否删除？').then(() => {
            //     this.loading = true;
            //     return customerDictDelete(row.customerDictId);
            // }).then(() => {
            //     this.loading = false;
            //     this.handleQuery();
            //     this.$modal.msgSuccess("删除成功");
            // }).finally(() => {
            //     this.loading = false;
            // });

            let str = 1==row.status?'启用':"停用"

            this.$modal.confirm(`是否${str}`).then(() => {
                this.loading = true;
                row.status ^= 1;
                return customerDictEdit(row);
            }).then(() => {
                this.loading = false;
                this.handleQuery();
                this.$modal.msgSuccess(`${str}成功`);
            }).finally(() => {
                this.loading = false;
            }).catch(()=>{});

        },

        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.buttonLoading = true;
                    this.form.customerDictType = 'clues_source';//客户字典类别(1.标签 2.线索来源 3.线索状态)

                    if (this.form.customerDictId) {
                        customerDictEdit(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.handleQuery();
                        }).finally(() => {
                            this.buttonLoading = false;
                        });
                    } else {
                        customerDictAdd(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.handleQuery();
                        }).finally(() => {
                            this.buttonLoading = false;
                        });
                    }
                }
            });
        },

    }
};
</script>


<style lang="scss" scoped>
.pagination-container {
    padding: 0 20px 50px !important;
}


.form-dialog {
    ::v-deep .el-dialog__header {
        padding: 10px 20px;
        border-bottom: 1px solid #DCDFE6;

        .el-dialog__headerbtn {
            top: 15px;
        }
    }

    .box-card {
        margin-bottom: 20px;

        .card-title {
            font-size: 16px;
            position: relative;
            margin-left: 8px;
            padding: 0;
        }

        .card-title::after {
            content: '';
            width: 4px;
            height: 18px;
            background-color: aqua;
            display: block;
            position: absolute;
            left: -12px;
            top: 2px;
        }
    }

}
</style>
